<template>
  <div class="page">
    <div class="block">
      <img class="banner" src="./images/img_0.png" />
      <div class="layer-wrapper">
        <img class="layer" src="./images/img_1.png" />
        <img class="text-background" src="./images/img_2.png" />
        <div class="wrapper-item-0">
          <img class="badge" src="./images/img_3.png" />
          <div class="group">
            <img class="horizontal-line" src="./images/img_4.png" />
            <img class="dot" src="./images/img_5.png" />
          </div>
        </div>
        <div class="wrapper-item-1">
          <img class="label" src="./images/img_6.png" />
          <div class="group-1">
            <img class="horizontal-line-1" src="./images/img_7.png" />
            <img class="dot-1" src="./images/img_8.png" />
          </div>
        </div>
        <div class="wrapper-item-2">
          <img class="tag" src="./images/img_9.png" />
          <div class="group-2">
            <img class="horizontal-line-2" src="./images/img_10.png" />
            <img class="dot-2" src="./images/img_11.png" />
          </div>
        </div>
        <div class="wrapper-item-3">
          <img class="badge-1" src="./images/img_12.png" />
          <div class="group-3">
            <img class="horizontal-line-3" src="./images/img_13.png" />
            <img class="dot-3" src="./images/img_14.png" />
          </div>
        </div>
        <div class="wrapper-item-4">
          <img class="label-1" src="./images/img_15.png" />
          <div class="group-4">
            <img class="horizontal-line-4" src="./images/img_16.png" />
            <img class="dot-4" src="./images/img_17.png" />
          </div>
        </div>
        <div class="wrapper-item-5">
          <img class="tag-1" src="./images/img_18.png" />
          <div class="group-5">
            <img class="horizontal-line-5" src="./images/img_19.png" />
            <img class="dot-5" src="./images/img_20.png" />
          </div>
        </div>
        <div class="wrapper-item-6">
          <img class="badge-2" src="./images/img_21.png" />
          <div class="group-6">
            <img class="horizontal-line-6" src="./images/img_22.png" />
            <img class="dot-6" src="./images/img_23.png" />
          </div>
        </div>
        <div class="wrapper-item-7">
          <img class="label-2" src="./images/img_24.png" />
          <div class="group-7">
            <img class="horizontal-line-7" src="./images/img_25.png" />
            <img class="dot-7" src="./images/img_26.png" />
          </div>
        </div>
        <div class="wrapper-item-8">
          <img class="tag-2" src="./images/img_27.png" />
          <div class="group-8">
            <img class="horizontal-line-8" src="./images/img_28.png" />
            <img class="dot-8" src="./images/img_29.png" />
          </div>
        </div>
        <div class="wrapper-item-9">
          <img class="badge-3" src="./images/img_30.png" />
          <div class="group-9">
            <img class="horizontal-line-9" src="./images/img_31.png" />
            <img class="dot-9" src="./images/img_32.png" />
          </div>
        </div>
        <div class="wrapper-item-10">
          <img class="label-3" src="./images/img_33.png" />
          <div class="group-10">
            <img class="horizontal-line-10" src="./images/img_34.png" />
            <img class="dot-10" src="./images/img_35.png" />
          </div>
        </div>
        <div class="wrapper-item-11">
          <img class="tag-3" src="./images/img_36.png" />
          <div class="group-11">
            <img class="horizontal-line-11" src="./images/img_37.png" />
            <img class="dot-11" src="./images/img_38.png" />
          </div>
        </div>
        <div class="wrapper-item-12">
          <img class="badge-4" src="./images/img_39.png" />
          <div class="group-12">
            <img class="horizontal-line-12" src="./images/img_40.png" />
            <img class="dot-12" src="./images/img_41.png" />
          </div>
        </div>
        <img class="dot-13" src="./images/img_41.png" />
        <div class="wrapper-item-13">
          <img class="label-4" src="./images/img_43.png" />
          <div class="group-13">
            <img class="horizontal-line-13" src="./images/img_44.png" />
            <img class="dot-14" src="./images/img_45.png" />
          </div>
        </div>
        <img class="icon-circle" src="./images/img_46.png" />
        <img class="icon-like" src="./images/img_47.png" />
        <img class="icon" src="./images/img_48.png" />
        <img class="text-background-1" src="./images/img_49.png" />
        <div class="wrapper">
          <img class="picture" src="./images/img_50.png" />
          <div class="group-14">
            <img class="icon-piece" src="./images/img_51.png" />
            <img class="icon-piece-1" src="./images/img_52.png" />
          </div>
          <div class="group-15">
            <img class="icon-star" src="./images/img_53.png" />
            <img class="icon-hot" src="./images/img_54.png" />
          </div>
          <div class="group-16">
            <img class="large-icon" src="./images/img_55.png" />
            <img class="large-icon-1" src="./images/img_56.png" />
          </div>
          <img class="icon-good" src="./images/img_57.png" />
          <img class="icon-piece-2" src="./images/img_58.png" />
          <img class="icon-circle-1" src="./images/img_59.png" />
          <div class="group-17">
            <img class="image" src="./images/img_60.png" />
            <img class="icon-piece-3" src="./images/img_61.png" />
            <img class="icon-chat" src="./images/img_62.png" />
          </div>
          <img class="icon-star-1" src="./images/img_63.png" />
          <div class="group-18">
            <img class="icon-piece-4" src="./images/img_64.png" />
            <img class="icon-text" src="./images/img_65.png" />
            <img class="icon-line" src="./images/img_66.png" />
          </div>
          <img class="large-icon-2" src="./images/img_67.png" />
        </div>
        <div class="wrapper-item-0-1">
          <img class="icon-circle-2" src="./images/img_68.png" />
          <div class="icon-circle-wrapper">
            <img class="icon-circle-3" src="./images/img_69.png" />
            <div class="view">
              <img class="icon-circle-4" src="./images/img_70.png" />
              <img class="icon-circle-5" src="./images/img_71.png" />
            </div>
          </div>
        </div>
        <div class="wrapper-item-0-2">
          <img class="icon-down" src="./images/img_72.png" />
          <img class="icon-down-1" src="./images/img_73.png" />
        </div>
        <div class="wrapper-item-1-1">
          <img class="icon-circle-6" src="./images/img_74.png" />
          <div class="icon-circle-wrapper-1">
            <img class="icon-circle-7" src="./images/img_75.png" />
            <div class="view-1">
              <img class="icon-circle-8" src="./images/img_76.png" />
              <img class="icon-circle-9" src="./images/img_77.png" />
            </div>
          </div>
        </div>
        <div class="wrapper-item-1-2">
          <img class="icon-down-2" src="./images/img_78.png" />
          <img class="icon-down-3" src="./images/img_79.png" />
        </div>
        <img class="icon-1" src="./images/img_80.png" />
        <img class="logo" src="./images/img_81.png" />
        <img class="logo-1" src="./images/img_82.png" />
        <div class="wrapper-item-2-1">
          <img class="icon-circle-10" src="./images/img_83.png" />
          <img class="icon-circle-11" src="./images/img_84.png" />
        </div>
        <img class="icon-down-4" src="./images/img_85.png" />
        <div class="wrapper-item-3-1">
          <img class="icon-circle-12" src="./images/img_86.png" />
          <img class="icon-circle-13" src="./images/img_87.png" />
        </div>
        <img class="icon-down-5" src="./images/img_88.png" />
        <div class="wrapper-item-14">
          <img class="tag-4" src="./images/img_89.png" />
          <div class="group-19">
            <img class="horizontal-line-14" src="./images/img_90.png" />
            <img class="dot-15" src="./images/img_91.png" />
          </div>
        </div>
        <div class="wrapper-item-15">
          <img class="badge-5" src="./images/img_92.png" />
          <div class="group-20">
            <img class="horizontal-line-15" src="./images/img_93.png" />
            <img class="dot-16" src="./images/img_94.png" />
          </div>
        </div>
        <div class="wrapper-item-16">
          <img class="label-5" src="./images/img_95.png" />
          <div class="group-21">
            <img class="horizontal-line-16" src="./images/img_96.png" />
            <img class="dot-17" src="./images/img_97.png" />
          </div>
        </div>
        <div class="wrapper-item-17">
          <img class="tag-5" src="./images/img_98.png" />
          <div class="group-22">
            <img class="horizontal-line-17" src="./images/img_99.png" />
            <img class="dot-18" src="./images/img_100.png" />
          </div>
        </div>
        <div class="wrapper-item-18">
          <img class="badge-6" src="./images/img_101.png" />
          <div class="group-23">
            <img class="horizontal-line-18" src="./images/img_102.png" />
            <img class="dot-19" src="./images/img_103.png" />
          </div>
        </div>
        <div class="wrapper-item-19">
          <img class="label-6" src="./images/img_104.png" />
          <div class="group-24">
            <img class="horizontal-line-19" src="./images/img_105.png" />
            <img class="dot-20" src="./images/img_106.png" />
          </div>
        </div>
        <div class="wrapper-item-20">
          <img class="tag-6" src="./images/img_107.png" />
          <div class="group-25">
            <img class="horizontal-line-20" src="./images/img_108.png" />
            <img class="dot-21" src="./images/img_109.png" />
          </div>
        </div>
        <img class="large-icon-3" src="./images/img_110.png" />
        <img class="action-bg" src="./images/img_111.png" />
        <span class="title">欢迎使用元蜂WMS</span>
        <span class="welcome-yuanfeng">Welcome to YuanFeng W</span>
        <span class="tag-7">MS</span>
      </div>
      <img class="cover" src="./images/img_112.png" />
      <div class="container">
        <img class="background" src="./images/img_113.png" />
        <img class="logo-2" src="./images/img_114.png" />
        <div class="wrapper-1">
          <img class="icon-down-6" src="./images/img_115.png" />
          <div class="icon-chat-wrapper">
            <img class="icon-chat-1" src="./images/img_116.png" />
            <img class="icon-complete" src="./images/img_117.png" />
          </div>
        </div>
        <div class="wrapper-item-0-3">
          <img class="button-bg" src="./images/img_118.png" />
          <div class="icon-chat-wrapper-1">
            <img class="icon-chat-2" src="./images/img_119.png" />
            <img class="icon-circle-14" src="./images/img_120.png" />
            <img class="play" src="./images/img_121.png" />
            <img class="icon-circle-15" src="./images/img_122.png" />
          </div>
          <input class="input" v-model="loginForm.username" placeholder="请输入手机号" />
        </div>
        <div class="wrapper-item-1-3">
          <img class="action-bg-1" src="./images/img_123.png" />
          <div class="icon-chat-wrapper-2">
            <img class="icon-chat-3" src="./images/img_124.png" />
            <img class="icon-lock" src="./images/img_125.png" />
          </div>
          <input type="password" class="input-1" v-model="loginForm.password" placeholder="请输入密码" />
        </div>
        <div class="button-bg-wrapper">
          <img class="button-bg-1" src="./images/img_126.png" />
          <span class="word" @click="login">立即登录</span>
        </div>
        <span class="tag-8">记住密码</span>
      </div>
    </div>
  </div>
</template>
<script>



export default {
  components: {

  },
  data () {
    return {
      loginForm: { username: 'admin', password: 'heima666' },
      constants: {},

    }
  },
  methods: {
    login () {
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: '/' })
      })
    }
  },

}
</script>

<style src="./css/login.css" />
;
